<template>
  <div class="lsc-login">
    <div class="lsc-center">
      <img :src="logoUrl" style="width:40%;">
    </div>
    <van-cell-group>
      <van-field
        v-model="login.userName"
        label="用户名"
        placeholder="请输入用户名"
        icon="clear"
        @click-icon="login.userName = ''"
      />
      <van-field
        v-model="login.Pwd"
        type="password"
        label="密码"
        placeholder="请输入密码"
        icon="clear"
        @click-icon="login.Pwd = ''"
      />
      <!-- <van-field
        v-model="login.code"
        label="验证码"
        placeholder="请输入验证码"
        icon="clear"
        @click-icon="login.code = ''"
      >
        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
      </van-field> -->
    </van-cell-group>
    <div class="lsc-center">
      <van-button class="lsc-login-button" type="default" size="large" @click="onClickLogin">登 录</van-button>
      <router-link class="lsc-login-reg" to="/reg?active=0">注册新账号</router-link>
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  name: 'login',
  computed: {
    ...mapGetters({
      logoUrl: 'getLogoUrl'
    })
  },
  data () {
    return {
      login: {
        userName: '',
        Pwd: '',
        code: '',
        weiXinToken: localStorage.openId
      }
    }
  },
  created() {
    if(!this.logoUrl) {
      this.$store.dispatch('fetchLogoUrl')
    }
  },
  methods: {
    onClickLogin() {
      let validLogin = this.validLogin(); // 校验手机号码
      if (validLogin) return;

      this.$toast.loading({
        duration: 0,
        message: '正在登录...'
      });

      this.axios.post(api.register.login, this.login)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            // 获取会员基础信息
            this.$store.dispatch('fetchBaseInfo')
            setTimeout(()=>{
              //公众号入口
              this.$router.push('/main')
            }, 800)
          }
        })
    },
    validLogin() {
      if(!this.login.userName) {
        this.$toast('用户名不能为空！')
        return true;
      }
      if(!this.login.Pwd) {
        this.$toast('密码不能为空！')
        return true;
      }
      if(this.login.Pwd.length < 6) {
        this.$toast('密码不能少于6位数！')
        return true;
      }
      // if(!this.login.code) {
      //   this.$toast('验证码不能为空！')
      //   return true;
      // }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  background-color: #999;
}
.lsc-center {
  text-align: center;
}
.lsc-login>.lsc-center>img {
  margin: 30px auto;
}
.lsc-login-button {
  width: 85%;
  border: 1px solid #946fd9;
  color:#fff;
  background-color: #946fd9;
  margin-top: 40px;
}
.lsc-login-reg {
  display: block;
  margin-top: 10px;
  color: #999;
}
</style>
